<template>
	<u-popup
		v-model="integralFeedShow"
		mode="center"
		:mask-close-able="false"
		class="chicken-edit">
		<view class="box">
			<view class="text">
				<view class="text-title">积分兑换</view>
				<view class="text-center">
					<view class="center-top">
						<view>确认使用<text>100</text>积分</view>
						<view>兑换<text>10g</text>饲料吗？</view>
					</view>
					<view class="center-bottom">
						<view>
							<image
								@click="changeIntegral('minus')"
								src="/static/images/chicken/dialog/integral_minus.png"
								mode="widthFix"></image>
							<view class="input">
								<u-input 
									v-model="integral"
									class="input-input"
									placeholder=""
									disabled
									:clearable="false"
									type="number" />
							</view>
							<image
								@click="changeIntegral('add')"
								src="/static/images/chicken/dialog/integral_add.png"
								mode="widthFix"></image>
						</view>
						<view>当前积分:{{ num }}</view>
					</view>
				</view>
				<view
					@click="rightGet"
					class="text-btn"></view>
			</view>
			
			<image
				class="bg"
				src="/static/images/chicken/dialog/integral_bg.png"
				mode="widthFix"></image>
			<image
				class="close"
				@click="changeShow"
				src="/static/images/chicken/close.png"
				mode="widthFix"></image>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: 'myFriend',
		props: {
			integralFeedShow: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				integral: 10,
				num: 500,
			}
		},
		mounted() {
			
		},
		methods: {
			changeShow() {
				this.$emit('changeShow', 'integralFeedShow');
			},
			changeIntegral(flag) {
				if (flag == 'minus') {
					if (this.integral <= 10) {
						this.integral = 0;
					} else {
						this.integral -= 10;
					}
				} else {
					if (this.integral >= this.num) {
						this.integral = Math.floor(this.num / 10) * 10;
					} else {
						this.integral += 10;
					}
				}
			},
			rightGet() {
				this.changeShow();
			},
		}
	}
</script>

<style lang="scss" scoped>
.chicken-edit {
	.box {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		background-color: transparent;
		.text {
			position: absolute;
			top: 165rpx;
			left: 0;
			z-index: 11;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
			.text-title {
				font-size: 36rpx;
				font-weight: 500;
				color: #732011;
			}
			.text-center {
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin: 64rpx 0 2rpx;
				color: #732011;
				text-align: center;
				.center-top {
					margin-bottom: 40rpx;
					text {
						padding: 0 10rpx;
					}
					view:first-of-type {
						margin-bottom: 16rpx;
						text {
							color: #F7585E;
						}
					}
					view:last-of-type {
						color: #FF7F01;
					}
				}
				.center-bottom {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					> view {
						display: flex;
						justify-content: center;
						align-items: center;
						.input {
							.input-input {
								width: 182rpx;
								height: 53rpx;
								line-height: 53rpx;
								margin: 0 24rpx;
								background-color: #FCEED6;
								border: 2rpx solid #cc8e62;
								border-radius: 28rpx;
								::v-deep .u-input__input {
									min-height: 50rpx !important;
									text-align: center;
									font-weight: bold;
									color: #732011;
								}
							}
						}
						image {
							width: 53rpx;
						}
					}
					> view:last-of-type {
						margin-top: 20rpx;
					}
				}
			}
			.text-btn {
				width: 405rpx;
				height: 103rpx;
				margin-top: 40rpx;
				background: url('/static/images/chicken/dialog/integral_btn.png') no-repeat center center;
				background-size: 100%;
				font-size: 32rpx;
				line-height: 96rpx;
				color: #fff;
				text-align: center;
			}
		}
		
		.bg {
			width: 586rpx;
		}
		
		.close {
			position: absolute;
			right: 36rpx;
			top: 65rpx;
			z-index: 11;
			width: 46rpx;
		}
	}
}
</style>